<template>
	<div class="echart"></div>
</template>
 
<script>
	
import * as Echarts from "echarts"

	export default{
		name: "EChart",
		props: {
		    // 直接将处理好的option传过来
        //如果有定时器也要处理定时器
		    seriesData: {
		      type: Object,
		      default: () => ({}),
		    },
		  },
		  data() {
		    return {
		      chart: null,
		    };
		  },
			
		  watch: {
		    seriesData: {
		      deep: true,
		      handler() {
		        this.updateChartView();
		      },
		    },
		  },
			
			mounted() {
				this.chart = Echarts.init(this.$el);
				this.updateChartView();
        let that = this;
        setTimeout(() => {
          window.addEventListener('resize', function () {
            that.chart.resize();;
          })
        }, 100);
			},
			beforeDestroy() {
			  window.removeEventListener("resize", this.handleWindowResize);
        this.chart && this.chart.dispose();
			},
			
			methods:{
				
				/**
				 * 更新echart视图
				 */
				updateChartView() {
					if (!this.chart) return;
          if (JSON.stringify(this.seriesData) === '{}') return;
					const fullOption = this.seriesData.option;

					this.chart.setOption(fullOption, true);
				},
		
				/**
				 * 当窗口缩放时，echart动态调整自身大小
				 */
				handleWindowResize() {
					if (!this.chart) return;
					this.chart.resize();
				},
			}
	}
</script>
 
<style scoped="scoped">
	.echart {
		width: 100%;
		height: 100%;
	}
</style>